<template>
    <div>
        我是基座的头部
        <div>
            <a href="javascript:;" v-for="item in menus" :key="item.id" style="margin-right: 20px;" :style="{color:activeName == item.id ? '#ff0000':'#000000'}" @click="handlerPath(item.path)">{{ item.title }}</a>
        </div>
    </div>
</template>

<script setup>
import { ref,reactive } from "vue";
import { useRouter } from 'vue-router'

const menus = reactive([
    {id:1,title:'vue3ChildApp',path:'vue3App'},
    {id:2,title:'nuxtChildApp',path:'nuxtApp'},

])
const activeName = ref(1)

const router = useRouter()

const handlerPath = (path) => {
    // 跳转到指定路径
    router.push(path)
}
</script>

<style lang="scss" scoped>

</style>